<template>
    <div>
        <h1>watch</h1>
        <p>
            watch可以监听数据或者路由.但是在监听引用数据类型的数据变换的时候.可能监听
            不到,这时候可以加上deep:true.进行深度监听,或者是我更习惯于,通过对象.属性的方式.放到字符串里面.去监听具体属性的变化.性能更高一些
            如果初始化的时候想默认监听一次,可以使用immediate:true
            这里面可以存在异步
        </p>
        <p>
            computed是一个计算属性.首先名字不能和data中的同名,是根据依赖项的变换来触发的.如果不变,就直接读取缓存里面的,这里不能存在异步
        </p>

        <input type="text" v-model="personInfo.name" />
        <input type="text" v-model="personInfo.age" /> {{ sumnum }}
    </div>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            num: 99,
            personInfo: {
                name: "郭冰涛",
                age: "22",
                sex: "男"
            },
            feavrateSports: ["篮球", "排球", "乒乓球"]
        };
    },
    computed: {
        sumnum(val) {
            setTimeout(() => {
                return this.personInfo.age + 20;
            });
        }
    },
    watch: {
        num(val) {
            console.log("num发生了变换", val);
        },
        // personInfo(val) {
        //     console.log("personInfo发生了变换", val);

        // },
        "personInfo.age": {
            handler: function (val) {
                // console.log("personInfo发生了变换", val);
                console.log("personInfo发生了变换", val);
            },
            immediate: true
        }
        // personInfo: {
        //     handler: function (val) {
        //         console.log("personInfo发生了变换", val);
        //     },
        //     deep: true,
        // immediate: true
        // }
    },
    methods: {},
    created() {},
    mounted() {}
};
</script>
<style scoped></style>
